<template>
  <div class="database-info">
    <el-tabs type="border-card">
      <el-tab-pane :label="$t('menu.systemActuator.deviceActuator')">
        <all-sort-and-search-table
          showSelect
          showOperate
          :columns="tableColumns"
          @getData="getTableList"
          @custom-click="customClicker"
        >
          <template slot="form" slot-scope="{ data }">
            <el-button
              type="primary"
              :disabled="data == null || data.length === 0"
              @click="() => getGeneratorTable(data)"
            >{{$t('common.connectStatus')}}</el-button>
          </template>
        </all-sort-and-search-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
            title="心跳趋势图"
            :visible.sync="showChart"
            width="50%"
            center>
      <ve-line :data="chartData" :settings="chartSettings"></ve-line>
    </el-dialog>
  </div>
</template>

<script>
import actuatorApi from "@/serveapi/actuatorApi.js";
import AllSortAndSearchTable from "@/components/Table/AllSortAndSearchTable.vue";
export default {
  components: {
    AllSortAndSearchTable,
  },
  data() {
    return {
      chartSettings : {
        labelMap: {
          'heartsPerMin': '每分钟预期心跳',
          'actualHeartsPerMin': '实际心跳'
        }
      },
      chartData: {
        columns: ['time', 'heartsPerMin', 'actualHeartsPerMin'],
        rows: [
          { 'time': '15:00:00', 'heartsPerMin': 3000, 'actualHeartsPerMin': 4000,},
          { 'time': '15:00:03', 'heartsPerMin': 5000, 'actualHeartsPerMin': 3230, },
          { 'time': '15:00:05', 'heartsPerMin': 5000, 'actualHeartsPerMin': 2623,  },
          { 'time': '15:00:07', 'heartsPerMin': 5000, 'actualHeartsPerMin': 1423,  },
          { 'time': '15:00:09', 'heartsPerMin': 5000, 'actualHeartsPerMin': 3492,  }
        ]
      },
      showChart:false,
      tableColumns: [
        {
          key: "deviceIp",
          label: "设备IP",
          width: 230,
          labelEn:'Ip'
        },
        {
          key: "conectTime",
          label: "连接时间",
		  disabled:true,
          labelEn:'connectTime'
        },{
          key: "lastModifyTime",
          label: "上次心跳时间",
		  disabled:true,
          labelEn:'lastModifyTime'
        },
		{
		  key: "close",
          label: "设备状况",
		  disabled:true,
          labelEn:'status'
		},
        {
          key: "operate",
          label: "操作",
          labelEn:'operate',
          disabled:true,
          options:[
            {key:'disconnect',label:'断开',type:'warning'},
            {key:'browser',label:'趋势图',type:'success'}
          ]
        }
      ]
    };
  },
  comments() {
    this.getDriverList();
  },
  computed:{
    heartsPerMin(){
      return (60/this.$store.getters.getHeartRule.leaseRenewalIntervalInSeconds)
    }
  },
  methods: {
    async getTableList(setData, searchOver) {
      try {
        let list = await actuatorApi.getAllDevices();
        setData(list);
      } finally {
        searchOver();
      }
    },
    getGeneratorTable(data) {
      this.$refs.SqlGeneratorDialog.open(data);
    },
    /**
     * 操作列回调事件
     */
    async customClicker(index,row,key){
      if (key=="disconnect"){
        actuatorApi.disconnect(row.sessionId).then(res=>{

        })
      }else{
        let data=await actuatorApi.getAllHearts(row.sessionId)
        this.showChart=true;
        this.$set(this.chartData,'rows',this.generateData(data));
      }
    },
    generateData(source){
      let res=[];
      let g=this;
      let now=new Date();
      let fmt='yyyy-MM-dd hh:mm';
      for (let i = 1; i <4 ; i++) {
        let row={ 'time': now.add('mi',-(i)), 'heartsPerMin':g.heartsPerMin, 'actualHeartsPerMin': 0};
        res.push(row)
      }
      for (let i = 1; i < 4; i++) {
        let row={ 'time': now.add('mi',i), 'heartsPerMin':g.heartsPerMin, 'actualHeartsPerMin': 0};
        res.push(row)
      }
      res.push({ 'time': now, 'heartsPerMin':g.heartsPerMin, 'actualHeartsPerMin': 0})
      res=res.sort((a,b)=>a.time.getTime()-b.time.getTime()).map(data=>{
        g.$set(data,'time',data.time.format(fmt));
        return data;
      })
      source.forEach(data=>{
        for (let i = 0; i <res.length ; i++) {
          if (data.sendTime==res[i].time){
            res[i].actualHeartsPerMin+=1;
            break;
          }
        }
      })
      return res;
    },
  },
  mounted() {
    console.log(this.heartsPerMin)
  }
};
</script>

<style lang="scss" scoped>
.database-info {
  margin: 30px;
}
</style>
